<template>
  <!-- 
  页码插件所需参数 
  current当前页码 
  total数据总量 
  limit页面容量 
  visibleNumber可见页码量
  -->
  <div class="pageNumber" v-show="pageNumber > 1">
    <!-- 点击回到首页 -->
    <a @click="handClick(1)" :class="{ def: current === 1 }"
      ><Icon icon="dyy"
    /></a>
    <!-- 点击返回上一页 -->
    <a @click="handClick(current - 1)" :class="{ def: current === 1 }"
      ><Icon icon="syy" />
    </a>
    <a
      :key="item"
      v-for="item in pageZ"
      @click="handClick(item)"
      :class="{ active: item === current }"
    >
      {{ item }}
    </a>
    <!-- 下一页 -->
    <a @click="handClick(current + 1)" :class="{ def: current === pageNumber }">
      <Icon icon="xyy" />
    </a>
    <!-- 最后一页 -->
    <a @click="handClick(pageNumber)" :class="{ def: current === pageNumber }"
      ><Icon icon="zhyy"
    /></a>
  </div>
</template>

<script>
import Icon from "../IconFont";
import { ref, computed } from "vue";
export default {
  components: {
    Icon,
  },
  props: {
    //当前页码
    current: {
      type: Number,
      default: 1,
    },
    //总数据量
    total: {
      type: Number,
      default: 0,
    },
    //页容量
    limit: {
      type: Number,
      default: 10,
    },
    //可见页码数
    visibleNumber: {
      type: Number,
      default: 5,
    },
  },
  setup(pro, ctx) {
    let current = ref(pro.current);
    let limit = ref(pro.limit);
    let total = ref(pro.total);
    let visibleNumber = ref(pro.visibleNumber);

    let pageNumber = computed(() => {
      return Math.ceil(total.value / limit.value);
    });

    let pageZ = computed(() => {
      let arr = [];
      // 计算当前第一页的页码
      let beginPage =
        current.value -
        Math.floor(
          (pageNumber.value > visibleNumber.value
            ? visibleNumber.value
            : pageNumber.value) / 2
        );
      if (current.value == 1) {
        beginPage = 1;
      }
      //通过数组控制页码
      for (
        let i = 0;
        i <
        (pageNumber.value > visibleNumber.value
          ? visibleNumber.value
          : pageNumber.value);
        i++
      ) {
        // 判断第一页
        if (beginPage <= 0) {
          beginPage = 1;
        }
        // 判断最后一页
        if (
          beginPage +
            (pageNumber.value > visibleNumber.value
              ? visibleNumber.value
              : pageNumber.value) >=
          Math.ceil(total.value / limit.value)
        ) {
          beginPage =
            Math.ceil(total.value / limit.value) -
            (pageNumber.value > visibleNumber.value
              ? visibleNumber.value
              : pageNumber.value) +
            1;
        }
        arr.push(beginPage + i);
      }
      return arr;
    });

    //返回给父级执行的函数
    let handClick = (num) => {
      if (num < 1) {
        num = 1;
        return
      }
      if (num > pageNumber.value) {
        num = pageNumber.value;
        ret 
      }
      current.value = num;
      ctx.emit("pageChange", num);
    };

    return {
      current,
      limit,
      total,
      visibleNumber,
      pageNumber,
      pageZ,
      handClick,
    };
  },
};
</script>

<style lang="less">
@import url("../../assets/global/var.less");
.pageNumber {
  display: flex;
  justify-content: space-around;

  .icon {
    font-size: 12px;
  }

  a {
    width: 2rem;
    height: 2rem;
    font-size: 16px;
    line-height: 2rem;
    text-align: center;
    border: 1px solid #000;
    white-space: nowrap;
    border-radius: 5px;
    color: #000;
    text-decoration: none;
    cursor: pointer;

    &.def {
      color: #ccc;
      border: 1px solid #ccc;
      &:hover {
        color: #ccc;
        border: 1px solid #ccc;
      }
    }

    &:hover {
      border: 1px solid @navigation_bar_content_active_color;
    }

    &.active {
      color: @navigation_bar_content_active_color;
      border: 1px solid @navigation_bar_content_active_color;
      font-weight: 900;
    }
  }
}
</style>
